<template>
  <div id="resources">
    <div id="MAps" style="width:100%;height:100%"></div>
    <div class="detailright" :class="!show ? 'active' : ''">
      <div @click="show = false" class="close"></div>
      <img v-show="!show" @click="show = true" class="open" src="@/assets/img/housedetail/img11.png" alt="" />
      <router-link to="/index"><img class="gone" src="@/assets/img/housedetail/img04.png" alt="" /></router-link>
      <menubox @handelClick="handelClick" />
      <div class="content">
        <img style="width:100%" src="@/assets/img/threezi/img01.png" alt="" />
        <a-table class="table mt24" :scroll="{ y: clientHeight - 280 }" :pagination="false" :columns="columns"
          :rowKey="(record) => record.id" :data-source="tableData">
          <div class="table-num" slot="dataindex" slot-scope="text, record, index">
            {{ index + 1 }}
          </div>
          <div @click="changMapCenter(record)" slot="name" slot-scope="text, record">
            {{ text }}
          </div>
          <div :class="text == '使用中' ? 'CF' : ''" @click="relativesClick(record)" slot="status"
            slot-scope="text, record">
            {{ text }}
          </div>
        </a-table>
      </div>
    </div>
    <div class="color fc">
      <img src="@/assets/img/threezi/img02.png" alt="" />
      <div class="fbd box">
        <span>正常</span>
        <span>异常</span>
        <span>超异常</span>
        <span>资源分析</span>
      </div>
    </div>
  </div>
</template>

<script>
import menubox from "@/components/detail/menubox";
import axios from "axios";
import { post, get } from "@/utils/axios";

import mapIconOffL from "@/assets/img/threezi/img04.png";
import mapIconOffH from "@/assets/img/threezi/img03.png";
import mapIconOffY from "@/assets/img/threezi/img05.png";
import { streetarea } from "@/assets/json/streetarea";
import five from "@/assets/img/five.png";
export default {
  name: "resources",
  components: { menubox },
  data() {
    return {
      timer: null,
      MAps: null,
      polygons: [],
      cluster: null, //点聚合
      markers: [], //点聚合marks
      clientHeight:
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight,
      show: true,

      name: "",

      columns: [
        {
          title: "序号",
          dataIndex: "dataindex",
          key: "dataindex",
          width: "9%",
          scopedSlots: { customRender: "dataindex" }
        },
        {
          title: "资源名称",
          dataIndex: "name",
          key: "name",
          scopedSlots: { customRender: "name" }
        },
        {
          title: "地理位置",
          dataIndex: "type",
          key: "type"
        },
        {
          title: "单位代码",
          dataIndex: "money",
          key: "money"
        },
        {
          title: "面积",
          dataIndex: "relatives",
          key: "relatives",
          width: "10%"
        },
        {
          title: "使用状态",
          dataIndex: "status",
          key: "status",
          scopedSlots: { customRender: "status" }
        },
        {
          title: "资源价值",
          dataIndex: "units",
          key: "units"
        }
      ],
      tableData: [
        {
          id: "1",
          lat: "120.1608187",
          lng: "30.29264623",
          name: "林地",
          type: "杭州XXX",
          money: "7100",
          status: "使用中",
          relatives: "233㎡",
          units: "20万元",
          position: "是",
          color: "红灯"
        },
        {
          id: "2",
          lat: "120.110513635581",
          lng: "30.3172256308009",
          name: "林地",
          type: "杭州XXX",
          money: "7100",
          status: "闲置",
          relatives: "233㎡",
          units: "20万元",
          position: "是",
          color: "绿灯"
        },
        {
          id: "3",
          lat: "120.186317",
          lng: "30.34856",
          name: "林地",
          type: "杭州XXX",
          money: "7100",
          status: "使用中",
          relatives: "233㎡",
          units: "20万元",
          position: "否",
          color: "黄灯"
        },
        {
          id: "4",
          lat: "120.145534",
          lng: "30.355397",
          name: "林地",
          type: "杭州XXX",
          money: "7100",
          status: "闲置",
          relatives: "233㎡",
          units: "20万元",
          position: "是",
          color: "红灯"
        },
        {
          id: "5",
          lat: "120.165534",
          lng: "30.365397",
          name: "林地",
          type: "杭州XXX",
          money: "7100",
          status: "闲置",
          relatives: "233㎡",
          units: "20万元",
          position: "否",
          color: "红灯"
        },
        {
          id: "6",
          lat: "120.155534",
          lng: "30.315397",
          name: "林地",
          type: "杭州XXX",
          money: "7100",
          status: "闲置",
          relatives: "233㎡",
          units: "20万元",
          position: "是",
          color: "红灯"
        },
        {
          id: "7",
          lat: "120.165534",
          lng: "30.285397",
          name: "林地",
          type: "杭州XXX",
          money: "7100",
          status: "闲置",
          relatives: "233㎡",
          units: "20万元",
          position: "是",
          color: "红灯"
        },
        {
          id: "8",
          lat: "120.135534",
          lng: "30.315397",
          name: "林地",
          type: "杭州XXX",
          money: "7100",
          status: "闲置",
          relatives: "233㎡",
          units: "20万元",
          position: "是",
          color: "红灯"
        },
        {
          id: "9",
          lat: "120.195534",
          lng: "30.315397",
          name: "林地",
          type: "杭州XXX",
          money: "7100",
          status: "闲置",
          relatives: "233㎡",
          units: "20万元",
          position: "v",
          color: "红灯"
        },
        {
          id: "10",
          lat: "120.145534",
          lng: "30.335397",
          name: "林地",
          type: "杭州XXX",
          money: "7100",
          status: "闲置",
          relatives: "233㎡",
          units: "20万元",
          position: "是",
          color: "红灯"
        },
        {
          id: "11",
          lat: "120.145534",
          lng: "30.375397",
          name: "林地",
          type: "杭州XXX",
          money: "7100",
          status: "闲置",
          relatives: "233㎡",
          units: "20万元",
          position: "否",
          color: "红灯"
        },
        {
          id: "12",
          lat: "120.145534",
          lng: "30.335397",
          name: "林地",
          type: "杭州XXX",
          money: "7100",
          status: "闲置",
          relatives: "233㎡",
          units: "20万元",
          position: "是",
          color: "红灯"
        },
        {
          id: "13",
          lat: "120.145534",
          lng: "30.295397",
          name: "林地",
          type: "杭州XXX",
          money: "7100",
          status: "闲置",
          relatives: "233㎡",
          units: "20万元",
          position: "否",
          color: "红灯"
        }
      ]
    };
  },
  created() {},
  mounted() {
    this.initMaps(this.tableData[0]);
    this.supplyEvent(14);
    window.onresize = () => {
      this.clientHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
    };
    for (const key in streetarea) {
      this.mapline(streetarea[key], key);
    }
  },
  destroyed() {
    // this.timer = null;
  },
  methods: {
    // //触发对应的
    changMapCenter(record) {
      this.MAps.setZoomAndCenter(18, [record.lat, record.lng]);
    },
    handelClick() {
      console.log("对比分析");
    },
    initMaps(record) {
      // 配置地图的基本显示
      this.MAps = new AMap.Map("MAps", {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 13, //初始化地图层级
        center: [record.lat, record.lng], //初始化地图中心点
        mapStyle: "amap://styles/darkblue"
        // zoomEnable: true,
        // dragEnable: true
      });

      let map = this.MAps;

      //鼠标点击marker弹出自定义的信息窗体
      AMap.event.addListener(this.MAps, "click", function() {
        map.clearInfoWindow();
      });
    },
    supplyEvent(zoom) {
      let map = this.MAps;
      map.clearMap();
      //列表
      let markerFive = new AMap.Marker({
        map: map,
        position: [120.141503, 30.319126],
        // icon: mapIconOff, //图标注意顺序,在经纬度后边
        icon: new AMap.Icon({
          size: new AMap.Size(50, 50),
          image: five,
          imageSize: new AMap.Size(50, 50)
        })
      });
      markerFive.setLabel({
        offset: new AMap.Pixel(0, 28), //设置文本标注偏移量
        content:
          '<span style="font-weight:700;color:#FFDE00;">拱墅区政府</span>', //设置文本标注内容
        direction: "center" //设置文本标注方位
      });
      let data = this.tableData;
      //点聚合
      data.forEach((item, index) => {
        var light;
        var className;
        if (item.color == "红灯") {
          light = mapIconOffH;
          className = "mapIconOffH";
        } else if (item.color == "黄灯") {
          light = mapIconOffY;
          className = "mapIconOffY";
        } else {
          light = mapIconOffL;
          className = "mapIconOffL";
        }
        let marker = new AMap.Marker({
          map: map,
          position: [item.lat, item.lng],
          // icon: mapIconOff, //图标注意顺序,在经纬度后边
          icon: new AMap.Icon({
            size: new AMap.Size(65, 90),
            image: light,
            imageSize: new AMap.Size(65, 90)
          })
          // offset: new AMap.Pixel(-15, -15)
        });
        // marker.setTitle(item.name);
        // 设置label标签
        // label默认蓝框白底左上角显示，样式className为：amap-marker-label
        marker.setLabel({
          offset: new AMap.Pixel(60, -32), //设置文本标注偏移量
          content: `<div class="mapLabel ${className}">${item.name}</div>`, //设置文本标注内容
          direction: "center" //设置文本标注方位
        });
        // this.markers.push(marker);
        //鼠标点击marker弹出自定义的信息窗体
        AMap.event.addListener(marker, "mouseover", e => {
          let content = `
            <div class="building_map_div" style="text-align: left">
              <div>
                <span class="WH">资源名称 ：</span>
                <span class="QS">林地</span>
              </div>
               <div class="fs">
                <span class="WH">资源类别 ：</span>
                <span class="QS">林地</span>
              </div>
            </div>"`;

          let infoWindow = new AMap.InfoWindow({
            isCustom: true, //使用自定义窗体
            content: content,
            offset: new AMap.Pixel(6, -25)
          });
          infoWindow.open(map, marker.getPosition());

          // marker.setIcon(mapIconOff);

          // e.target.setIcon(siteOff); //图标注意顺序,在经纬度后边,放最后

          // const newIcon = new AMap.Icon({
          //   size: new AMap.Size(52, 26), // 图标尺寸
          //   image: mapIconOff, // Icon的图像
          //   imageSize: mapIconOff.size // 根据所设置的大小拉伸或压缩图片
          // });
          // marker.setIcon(newIcon);
        });
        AMap.event.addListener(marker, "click", e => {
          // 设置缩放级别和中心点
          map.setZoomAndCenter(18, [item.lat, item.lng]);

          // map.setFitView(marker);
          //触发子组件中事件
          this.$refs.childdetail.fatherClick(item.street, 18);
          // marker.setIcon(mapIconOff);
          // e.target.setIcon(siteOff); //图标注意顺序,在经纬度后边,放最后
        });
      });

      //无参数时，自动自适应所有覆盖物

      if (!zoom) {
        map.setFitView();
      }
    },
    mapline(lineArr, name) {
      //清除地图上所有覆盖物
      // if (this.polygons.length > 0) {
      //   console.log(this.polygons);
      //   for (var i = 0, l = this.polygons.length; i < l; i++) {
      //     this.polygons[i].setMap(null);
      //   }
      // }
      //  map.setCenter(obj[obj.options.selectedIndex].center)
      // 创建纯文本标记
      let position = {
        上塘街道: ["120.15617072023774", "30.31289737993914"],
        祥符街道: ["120.098969", "30.325291"],
        半山街道: ["120.181007", "30.34976"],
        康桥街道: ["120.149109", "30.364849"],
        湖墅街道: ["120.145203", "30.29335"],
        小河街道: ["120.132179", "30.30575"],
        拱宸桥街道: ["120.144768", "30.321371"],
        和睦街道: ["120.12433172883607", "30.30769471914404"],
        米市巷街道: ["120.150993", "30.283834"],
        大关街道: ["120.156433", "30.30534"]
      };
      // 设置文本标记锚点
      var text = new AMap.Text({
        text: name,
        anchor: "center",
        // draggable: true,
        // cursor: "pointer",
        angle: 10,
        style: {
          "border-width": 0,
          "font-size": ".12rem",
          "background-color": "transparent",
          color: "#ddd"
        },
        position: position[name]
      });
      text.setMap(this.MAps);

      this.MAps.setZoomAndCenter(13, ["120.145534", "30.355397"]);
      var polygon = new AMap.Polygon({
        path: lineArr, //设置多边形边界路径
        strokeColor: name == "运河" ? "" : "#1e86fd", //线颜色
        strokeOpacity: 1, //线透明度
        strokeWeight: 3, //线宽
        fillColor: name == "运河" ? "#41f4f8" : "#1791fc", //填充色
        fillOpacity: name == "运河" ? "0.8" : "0.2" //填充透明度
      });

      // polygon.setMap(null);
      polygon.setMap(this.MAps);
      this.polygons.push(polygon);
      // console.log(polygon, 9999);
      var overlayGroup = new AMap.OverlayGroup(this.polygons);

      // this.MAps.setFitView();
    }
  }
};
</script>

<style lang="scss">
#resources {
  text-align: center;
  width: 100%;
  height: 100%;
  .color {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    left: 0.45rem;
    font-size: 0.12rem;
    bottom: 0.8rem;
    z-index: 101;
    img {
      width: 0.32rem;
      height: 1.3rem;
    }
    .box {
      color: #fff;
      margin-left: 0.1rem;
      align-items: flex-start;
      line-height: 0.33rem;
    }
  }
  #infowindow {
    width: 3.6rem;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 101;
  }

  .amap-icon img {
    width: 1rem;
  }
  .operate_div {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8vw;
    height: 35vh;
    font-weight: 600;
    z-index: 100;
  }

  .amap-marker-label {
    cursor: pointer;
    color: #fff;
    font-size: 0.12rem;
    background: none;
    border: none;
  }

  .building_map_div {
    border-radius: 0.2vw;
    padding: 0.5vw;
    background: url(../assets/img/mid/img09.png) center no-repeat;
    background-size: 100% 100%;
    font-size: 0.14rem;
    font-weight: bold;
    line-height: 3vh;
    word-break: keep-all;
  }

  .building_map_header_title {
    color: #3afc06;
    padding-left: 0.3vw;
    margin-left: -0.3vw;
  }

  .icon-dingwei {
    font-size: 0.16rem;
  }
  .building_map_value {
    color: #00dafb;
    color: 0.2rem;
  }

  .amap-logo {
    display: none !important;
  }
  // 左侧内容
  .detailright {
    width: 5.78rem;
    transition: all 0.2s;
    height: 100vh;
    padding: 1.2rem 0.2rem 0 0.8rem;
    box-sizing: border-box;
    background: url(../assets/img/businessdetail/img08.png) center no-repeat;
    background-size: 100% 100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    &.active {
      width: 0;
      padding: 0;
    }
    .close {
      cursor: pointer;
      width: 0.6rem;
      height: 6rem;
      position: absolute;
      transform: translateY(-50%);
      top: 50%;
      left: 0.1rem;
    }
    .open {
      cursor: pointer;
      width: 0.33rem;
      position: fixed;
      transform: translateY(-50%);
      top: 50%;
      right: 0rem;
      z-index: 9998;
    }
    .gone {
      cursor: pointer;
      width: 0.6rem;
      height: 0.6rem;
      position: fixed;
      top: 0.24rem;
      right: 0.28rem;
    }
    .content {
      .col2 .item {
        margin-top: 0.14rem;
      }
      .col2 img {
        width: 0.46rem;
        margin-right: 0.06rem;
      }
      .col2 .des {
        text-align: left;
      }

      .title {
        text-align: left;
        line-height: 0.18rem;
        font-size: 0.14rem;
        background-color: #0d2d50;
        color: $QS;
        margin-bottom: 0.2rem;
        .unit {
          margin-left: 0.2rem;
          color: #fff;
          font-size: 0.12rem;
        }
      }
      .box {
        align-items: flex-end;
        img {
          width: 0.85rem;
        }
      }
      .number {
        text-align: right;
        .title {
          display: inline-block;
        }
      }
      .item-box .item {
        margin-top: 0.2rem;
        img {
          width: 0.3rem;
        }
        .text {
          color: #fff;
          margin-left: 0.2rem;
        }
        .money {
          padding-right: 0.04rem;
          text-align: right;
          color: $QS;
          font-family: "electronicFont";
          line-height: 0.18rem;
          background-image: linear-gradient(
              90deg,
              rgba(9, 192, 245, 0.6) 0%,
              #0c2c4f 100%
            ),
            linear-gradient(#000000, #000000);
          background-blend-mode: normal, normal;
          span {
            font-size: 0.12rem;
            color: #0975a2;
          }
        }
      }
    }
  }
}
</style>
